<template>
    <div class="container">
        <div class="title">
            <span>信息设置</span>
        </div>
        <el-divider></el-divider>
        <br/>
        <el-form label-width="150px"
                 :model="form"
                 status-icon
                 ref="form"
                 @submit.native.prevent>
            <el-form-item label="发布项目支付金额" prop="project_hatch_price">
                <el-input size="medium" type="number" v-model="form.member_project_hatch_price" placeholder="请填写发布项目支付金额"></el-input>（会员）
            </el-form-item>
            <el-form-item label="发布项目支付金额" prop="project_hatch_price">
                <el-input size="medium" type="number" v-model="form.project_hatch_price" placeholder="请填写发布项目支付金额"></el-input>（普通实名认证用户）
            </el-form-item>
            <el-form-item label="查看项目支付金额" prop="project_hatch_look_price">
                <el-input size="medium" type="number" v-model="form.project_hatch_look_price" placeholder="请填写查看项目支付金额"></el-input>（普通实名认证用户）
            </el-form-item>
            <el-form-item label="查看项目时间/天" prop="project_hatch_look_price">
                <el-input size="medium" type="number" v-model="form.project_hatch_look_day" placeholder="请填写查看项目时间"></el-input>（普通实名认证用户）
            </el-form-item>
            <el-form-item label="分享图片" prop="invite_img_id">
                <upload-imgs
                        ref="uploadEle"
                        :value="imgValue"
                        :rules="rules"
                        :multiple="true"
                        :min-num="1"
                        :max-num="1"
                />
            </el-form-item>
            <el-form-item label="邀请注册规则" prop="invite_rule">
                <el-input size="medium"
                          v-model="form.invite_rule"
                          type="textarea"
                          :rows="5" placeholder="请填写邀请注册规则"></el-input>
            </el-form-item>
            <el-form-item label="城市合伙人说明" prop="partner_explain">
                <el-input size="medium"
                          v-model="form.partner_explain"
                          type="textarea"
                          :rows="5" placeholder="请填写城市合伙人说明"></el-input>
            </el-form-item>
            <el-form-item label="城市合伙人规则" prop="partner_rule">
                <el-input size="medium"
                          v-model="form.partner_rule"
                          type="textarea"
                          :rows="5" placeholder="请填写城市合伙人规则"></el-input>
            </el-form-item>
            <el-form-item label="助理说明" prop="assistant_explain">
                <el-input size="medium"
                          v-model="form.assistant_explain"
                          type="textarea"
                          :rows="5" placeholder="请填写助理说明"></el-input>
            </el-form-item>
            <el-form-item label="会员说明" prop="member_explain">
                <el-input size="medium"
                          v-model="form.member_explain"
                          type="textarea"
                          :rows="5" placeholder="请填写会员说明"></el-input>
            </el-form-item>
            <el-form-item label="预订须知" prop="booking_instructions">
                <el-input size="medium"
                          v-model="form.booking_instructions"
                          type="textarea"
                          :rows="5" placeholder="请填写预订须知"></el-input>
            </el-form-item>
            <el-form-item label="地址坐标" prop="coordinate">
                <el-input size="medium" v-model="form.coordinate" placeholder="请填写地址坐标"></el-input>
                <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">腾讯坐标拾取网址</a>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
                <el-input size="medium"
                          v-model="form.phone" placeholder="请填写联系方式"></el-input>
            </el-form-item>
            <el-form-item label="联系我们" prop="contact_us">
                <div class="lin-wrap">
                    <tinymce  :defaultContent="form.contact_us" @change="change" />
                </div>
            </el-form-item>
            <el-form-item label="发布项目须知" prop="project_discount">
                <el-input size="medium"
                          v-model="form.project_discount"
                          type="textarea"
                          :rows="5" placeholder="请填写发布项目须知"></el-input>
            </el-form-item>
            <el-form-item class="submit">
                <el-button type="primary" @click="submitForm('form')">保 存</el-button>
                <el-button @click="resetForm('form')">重 置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import system from '@/models/system'
import Tinymce from '@/components/base/tinymce'
import UploadImgs from '@/components/base/upload-imgs'

export default {
  components: {
    Tinymce,
    UploadImgs,
  },
  data() {
    return {
      imgValue: [],
      form: {
        member_project_hatch_price: '',
        project_hatch_price: '',
        project_hatch_look_price: '',
        project_hatch_look_day: '',
        invite_rule: '',
        partner_explain: '',
        partner_rule: '',
        assistant_explain: '',
        coordinate: '',
        phone: '',
        contact_us: '',
        member_explain: '',
        invite_img_id: '',
        booking_instructions: '',
        project_discount: '',
      },
      rules: {
        maxSize: 0.3,
        width: 750,
        height: 1206,
      },
    }
  },
  mounted() {
    this.getSystem()
  },
  methods: {
    // 获取详情
    async getSystem() {
      const systemInfo = await system.getSystem()
      if (systemInfo.invite_img_id) {
        this.imgValue = [{
          delete: false,
          id: systemInfo.id,
          imgId: systemInfo.invite_img_id,
          display: systemInfo.img.url,
        }]
      }
      this.form = {
        member_project_hatch_price: systemInfo.member_project_hatch_price,
        project_hatch_price: systemInfo.project_hatch_price,
        project_hatch_look_price: systemInfo.project_hatch_look_price,
        project_hatch_look_day: systemInfo.project_hatch_look_day,
        invite_rule: systemInfo.invite_rule,
        partner_explain: systemInfo.partner_explain,
        partner_rule: systemInfo.partner_rule,
        assistant_explain: systemInfo.assistant_explain,
        member_explain: systemInfo.member_explain,
        coordinate: systemInfo.coordinate,
        phone: systemInfo.phone,
        contact_us: systemInfo.contact_us,
        invite_img_id: systemInfo.invite_img_id,
        booking_instructions: systemInfo.booking_instructions,
        project_discount: systemInfo.project_discount,
      }
    },
    // eslint-disable-next-line no-unused-vars
    async submitForm(formName) {
      const self = this
      const imgValue = await self.$refs.uploadEle.getValue()
      // eslint-disable-next-line no-unused-vars
      const info = {
        member_project_hatch_price: self.form.member_project_hatch_price,
        project_hatch_price: self.form.project_hatch_price,
        project_hatch_look_price: self.form.project_hatch_look_price,
        project_hatch_look_day: self.form.project_hatch_look_day,
        invite_rule: self.form.invite_rule,
        partner_explain: self.form.partner_explain,
        partner_rule: self.form.partner_rule,
        assistant_explain: self.form.assistant_explain,
        member_explain: self.form.member_explain,
        coordinate: self.form.coordinate,
        phone: self.form.phone,
        contact_us: self.form.contact_us,
        invite_img_id: Number(imgValue[0].imgId),
        booking_instructions: self.form.booking_instructions,
        project_discount: self.form.project_discount,
      }
      try {
        // eslint-disable-next-line no-unused-vars
        const res = await system.editSystem(info)
        if (res.error_code === 0) {
          this.$message.success(`${res.msg}`)
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 重置表单
    resetForm() {
      this.getSystem()
    },
    change(val) {
      this.form.contact_us = val
    },
  },
}
</script>

<style lang="scss" scoped>
    .el-divider--horizontal {
        margin: 0
    }

    .container {
        .title {
            height: 59px;
            line-height: 59px;
            color: $parent-title-color;
            font-size: 16px;
            font-weight: 500;
            text-indent: 40px;

            .back {
                float: right;
                margin-right: 40px;
                cursor: pointer;
            }
        }

        .wrap {
            padding: 20px;
        }

        .submit {
            float: left;
        }
    }
</style>
